<template>
  <van-popup v-model="currentValue" round :close-on-click-overlay="false">
    <div class="g-dialog">
      <div class="title">{{ title }}</div>
      <div class="content">
        <slot></slot>
      </div>
      <div class="button" @click="onClick">
        <van-button type="info" size="small" block>{{ buttonText }}</van-button>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  name: "g-dialog",
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "温馨提示"
    },
    buttonText: {
      type: String,
      default: "确定"
    }
  },
  watch: {
    value(_value) {
      this.currentValue = _value;
    },
    currentValue(_value) {
      this.$emit("input", _value);
    }
  },
  data() {
    return {
      currentValue: this.value
    };
  },
  methods: {
    onClick() {
      this.$emit("confirm");
    }
  }
};
</script>

<style lang="less" scoped>
.g-dialog {
  box-sizing: border-box;
  width: 290px;
  padding: 30px;
  background: @white;
  border-radius: 10px;
  text-align: center;

  .title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: @gray-7;
    line-height: 22px;
    margin-bottom: 22px;
  }

  .content {
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color: @gray-6;
    line-height: 18px;
    margin-bottom: 22px;
  }

  .button {
    margin: 0 auto;
    width: 100px;
  }
}
</style>
